import React, { useCallback, useState } from 'react'
import { View, Text, TextInput } from 'react-native'

export default function Index() {
  const [text, setText] = useState('')

  const handleTextInput = useCallback(
    (text) => {
      setText(text)
    },
    [],
  )

  return (
    <View style={{
      flex: 1,
      width: '100%',
      alignItems: 'center'
    }}>
      <TextInput
        style={{
          borderWidth: 1,
          width: '90%',
          marginTop: 50,
          height: 40,
          padding: 10
        }}
        placeholder="输入..."
        onChangeText={handleTextInput}
        keyboardType="default"
      ></TextInput>
      <View style={{marginTop: 30}}>
        <Text>{text.split(' ').map(word => word && '🍕').join(' ')}</Text>
      </View>
    </View>
  )
}
